<!DOCTYPE html>
<html lang="zh-cmn-Hans" xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="UTF-8">
	<link rel="shortcut icon" href="favicon.ico">
	<link rel="stylesheet" href="css/iconfont.css">
	<link rel="stylesheet" href="css/global.css">
	<link rel="stylesheet" href="css/bootstrap.min.css">
	<link rel="stylesheet" href="css/bootstrap-theme.min.css">
	<link rel="stylesheet" href="css/login.css">
	<script src="js/jquery.1.12.4.min.js" charset="UTF-8"></script>
	<script src="js/bootstrap.min.js" charset="UTF-8"></script>
	<script src="js/jquery.form.js" charset="UTF-8"></script>
	<script src="js/global.js" charset="UTF-8"></script>
	<script src="js/login.js" charset="UTF-8"></script>
	<script src="js/jquery.DJMask.2.1.1.js" charset="UTF-8"></script>
	<title>登录 / 注册</title>
</head>
<body>
	<div class="public-head-layout container">
		<a style="left: -22px;top: 15px;width: 246px;height: 188px;" class="logo" href="index.html"><img src="images/icons/logo.png" alt="农资商贸销售系统" class="cover"></a>
	</div>
	<div style="background:url(images/bj.jpg) no-repeat center center; ">
		<div class="login-layout container">
			<div class="form-box login">
				<div class="tabs-nav">
					<h2>欢迎登录农资商贸销售系统平台</h2>
				</div>
				<div class="tabs_container">
					<form class="tabs_form" action="" method="post" id="login_form">
						<div class="form-group">
							<div class="input-group">
								<div class="input-group-addon">
									<span class="glyphicon glyphicon-phone" aria-hidden="true"></span>
								</div>
								<input class="form-control phone" name="phone" id="login_phone" required placeholder="手机号" maxlength="11" autocomplete="off" type="text">
							</div>
						</div>
						<div class="form-group">
							<div class="input-group">
								<div class="input-group-addon">
									<span class="glyphicon glyphicon-lock" aria-hidden="true"></span>
								</div>
								<input class="form-control password" name="password" id="login_pwd" placeholder="请输入密码" autocomplete="off" type="password">
								<div class="input-group-addon pwd-toggle" title="显示密码"><span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span></div>
							</div>
						</div>
	                    <!-- 错误信息 -->
						<div class="form-group">
							<div class="error_msg" id="login_error">
							</div>
						</div>
	                    <button class="btn btn-large btn-primary btn-lg btn-block submit" id="login_submit" type="button">登录</button><br>
	                    <p class="text-center">没有账号？<a href="javascript:;" id="register">免费注册</a></p>
                    </form>
                </div>
			</div>
			<div class="form-box register">
  				<div class="tabs-nav">
  					<h2>欢迎注册<a href="javascript:;" class="pull-right fz16" id="reglogin">返回登录</a></h2>
  				</div>
  				<div class="tabs_container">
					<form class="tabs_form" action="index.html" method="post" id="register_form">
						<div class="form-group">
							<div class="input-group">
								<div class="input-group-addon">
									<span class="glyphicon glyphicon-phone" aria-hidden="true"></span>
								</div>
								<input class="form-control phone" name="phone" id="register_phone" required placeholder="手机号" maxlength="11" autocomplete="off" type="text">
							</div>
						</div>
						<div class="form-group">
							<div class="input-group">
								<div class="input-group-addon">
									<span class="glyphicon glyphicon-lock" aria-hidden="true"></span>
								</div>
								<input class="form-control password" name="password" id="register_pwd" placeholder="请输入密码" autocomplete="off" type="password">
								<div class="input-group-addon pwd-toggle" title="显示密码"><span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span></div>
							</div>
						</div>
	                    <!-- 错误信息 -->
						<div class="form-group">
							<div class="error_msg" id="register_error"></div>
						</div>
	                    <button class="btn btn-large btn-primary btn-lg btn-block submit" id="register_submit" type="button">注册</button>
                    </form>
                </div>
			</div>
			<script>
				$(document).ready(function() {
					// 判断直接进入哪个页面 例如 login.php?p=register
					switch($.getUrlParam('p')) {
						case 'register': $('.register').show(); break;
						default: $('.login').show();
					};
					$('.submit').click(function() {
						var form = $(this).parents('form')
						var number = form.find('input.phone');
						var pwd = form.find('input.password');
						var error = form.find('.error_msg');
						// 验证手机号参考这个
						switch(number.validatemobile()) {
							case 1: error.html(msgtemp('<strong>手机号码为空</strong> 请输入手机号码',    'alert-warning')); return; break;
							case 2: error.html(msgtemp('<strong>手机号码错误</strong> 请输入11位数的号码','alert-warning')); return; break;
							case 3: error.html(msgtemp('<strong>手机号码错误</strong> 请输入正确的号码',  'alert-warning')); return; break;
						}
						// 验证密码复杂度参考这个
						switch(pwd.validatepwd()) {
							case 1: error.html(msgtemp('<strong>密码不能为空</strong> 请输入密码',    'alert-warning')); return; break;
							case 2: error.html(msgtemp('<strong>密码过短</strong> 请输入6位以上的密码','alert-warning')); return; break;
						}
						let phone = number.val();
						let password = pwd.val();
						if($(this).attr('id') == 'login_submit') {
							// 发起登陆请求
							$.ajax({
								url: '/mall/userinfo/login',
								type: 'post',
								data: {phone,password},
								success: function(res) {
									if(res.code === 200) {
										DJMask.open({
											width: "300px",
											height: "100px",
											content: "登陆成功，将在1秒后自动返回刚刚的页面"
										})
										let oldPath = document.referrer;
										//倒计时1秒跳转到首页或者刚刚点击的页面
										setTimeout(function () {
											if (!document.referrer){
												window.location.href = '/mall/index';
											}else{
												//如果oldPath包含userUpdatePwd3就跳转到首页
												if (oldPath.indexOf('userUpdatePwd3') > -1 || oldPath.indexOf('login') > -1) {
													window.location.href = '/mall/index';
												}else{
													self.location = document.referrer;
												}
											}
										}, 1000);
									}else{
										error.html(msgtemp('<strong>登录失败</strong>'+res.msg, 'alert-danger'));
									}
								},
								error: function(res) {
									error.html(msgtemp('<strong>登录失败</strong> 请重试', 'alert-danger'));
								}
							})
						}else if($(this).attr('id') =='register_submit') {
							// 发起注册请求
							$.ajax({
								url: '/mall/userinfo/register',
								type: 'post',
								data: {phone,password},
								success: function(res) {
									if(res.code === 200) {
										error.html(msgtemp('<strong>注册成功</strong> 请登录', 'alert-success'));
									}else{
										error.html(msgtemp('<strong>注册失败</strong>'+res.msg, 'alert-danger'));
									}
								},
								error: function(res) {
									error.html(msgtemp('<strong>注册失败</strong> 请重试', 'alert-danger'));
								}
							})
						}

					})
				});
			</script>
		</div>
	</div>

	<!-- 底部信息 -->
	<div class="footer" th:fragment="footer">
		<div class="copy-box clearfix">
			<!-- 版权 -->
			<p class="copyright">
				© 2005-2017 农资商城销售系统 版权所有，并保留所有权利<br>
				ICP备案证书号：农资商城销售系统
			</p>
		</div>
	</div>
</body>
</html>